<template>
	<view class="">
		<view class="header-cover" :style="{backgroundImage:`url(${ profile.bg_img||bg_url})`}">
			<!-- #ifdef MP -->
			<view class="page-navbar" :style="{opacity:opacity}">
				<u-navbar title="个人主页" :custom-back="backBtnHandle">
				</u-navbar>
			</view>
			<view @click="backBtnHandle" class="back-btn" v-if="opacity==0">
				<text class="iconfont icon-zuo"></text>
			</view>
			<!-- #endif -->
			<view class="change-bg-btn" v-if="uid==userInfo.uid">
				<u-tag text="更换背景图" mode="light" type="success" border-color="transparent" shape="circle" size="mini"
					@click="changeBgImagehandle"></u-tag>
			</view>
		</view>
		<!-- <view> -->
		<view class="bg-white u-p-30 u-m-b-30 u-skeleton">
			<view class="u-flex u-col-top u-m-b-16 ">
				<u-avatar :src="profile.avatar" :size="90" :show-level="profile.is_power==1"
					:level-bg-color="$appConfig.mainColor" class="u-skeleton-circle"></u-avatar>
				<view class="u-flex-1 u-m-l-20">
					<view class="u-flex u-m-b-10 u-skeleton-rect">
						<text class="u-font-36 u-m-r-14" style="font-weight: 600;">{{profile.name || profile.nickname}}</text>

					</view>
					<view class="u-flex u-skeleton-rect">
						<bb-tag v-if="profile.is_real" class="u-m-r-10"></bb-tag>
						<u-tag type="warning" text="随叫随到" size="mini" mode="dark" v-if="profile.is_free&&profile.is_power"></u-tag>
					</view>
				</view>
				<view class="u-light-color" style="text-align: right;">
					<text class="u-type-primary u-font-40">{{profile.serve_score||'0.0'}}</text>
					<view class="" style="text-align: right;">评分</view>
				</view>
			</view>
			<view class="u-skeleton-rect u-m-b-16 ">
				<text>{{profile.label}}</text>
			</view>
			<view class="u-flex u-font-22 u-skeleton-rect" style="color: #033E26; ">
				<view class="u-m-r-20">ID：{{profile.id}} </view>
				<view class="u-m-r-20">IP：{{profile.ip}} </view>
				<view class="u-m-r-20">{{profile.sex_name}}</view>
				<text class="u-m-r-20">{{profile.class_one_name=='更多'?'其他行业':profile.class_one_name}}</text>
				<view class="u-flex-1 align-right" v-if="uid==userInfo.uid">
					<u-button size="mini" type="primary" hover-class="none" shape="circle" @click="toEditprofile">编辑资料</u-button>
				</view>
			</view>

			<view class="divide-line"></view>

			<view class="good-content u-tips-color u-skeleton-rect">
				<text class="font-medium" style="color: #033E26;">擅长：</text>{{profile.class_three_name}}
			</view>
		</view>

		<u-sticky :offset-top="stickyTop">
			<view class="u-m-b-30">
				<u-tabs-swiper ref="tabs" :list="navProfile" :current="current" @change="change" inactive-color="#666666"
					:active-color="$appConfig.mainColor" :active-item-style="activeItemStyle" :is-scroll="false"></u-tabs-swiper>
			</view>
		</u-sticky>

		<view class="bg-white">
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
				:style="[{height: swiperHeight+ 'px'}]">
				<swiper-item class="">
					<view class="swiper-item">
						<view class="view-title">
							服务场景
						</view>
						<view class="u-p-30">
							<view class="" v-for="(item,index) in profile.serve_list" :key="index">
								<view class="service-item" @click="$u.route('/pages/subpage/list/serv_detail',{id:item.id})">
									<view class="u-flex-1 w-0">
										<view class="u-font-32 font-medium u-line-1 u-m-b-10">{{item.title}}</view>
										<view class="u-light-color u-line-2 service-desc">{{item.description}}
										</view>
										<view class="u-light-color">
											<text class="u-font-22 u-type-error">￥</text>
											<text class="u-font-28 u-type-error u-m-r-20 font-medium">{{item.price}}</text>已帮助<text
												class="u-type-primary">{{item.sales}}</text>人
										</view>
									</view>
								</view>
								<view class="divide-line"></view>
							</view>

							<mescroll-empty :option="{tip:'暂无相关数据'}"
								v-if="profile.serve_list&&profile.serve_list.length==0"></mescroll-empty>
						</view>
					</view>

				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="view-title">
							需求
						</view>
						<view class="u-p-30">
							<view class="" v-for="(item,index) in profile.demand_list" :key="index">
								<view class="service-item" @click="$u.route('/pages/subpage/list/dem_detail',{id:item.id})">
									<view class="u-flex-1 w-0">
										<view class="u-font-32 font-medium u-line-2">{{item.title}}</view>
										<view class="u-flex">
											<view class="u-flex-1 ">
												<view class="u-m-t-20 u-flex">
													<view class="u-m-r-20 u-m-b-20">
														<u-tag :text="item.class_one_name" type="info" border-color="transparent" />
													</view>
													<!-- <view class="u-m-r-20 u-m-b-20">
														<u-tag :text="item.exp_name" type="info" border-color="transparent" />
													</view> -->
												</view>
												<view class="u-light-color">
													发布于{{item.add_time}}
												</view>
											</view>
											<view class="u-flex-col u-col-bottom">
												<view class="u-type-error u-font-36 u-m-b-14">
													<text class="u-font-22">￥</text>{{item.price}}
												</view>
												<u-button type="primary" size="mini" hover-class="none" v-if="uid!=userInfo.uid"
													@click.stop.prevent="$u.route('/pages/subpage/order/action_dem',{id:item.id})">
													去接单
												</u-button>
											</view>
										</view>
									</view>
								</view>
								<view class="divide-line"></view>
							</view>

							<mescroll-empty :option="{tip:'暂无相关数据'}"
								v-if="profile.demand_list&&profile.demand_list.length==0"></mescroll-empty>
						</view>
					</view>

				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="view-title u-flex u-row-between">
							全部评论（{{profile.reply_list&&profile.reply_list.length || 0}}）
						</view>
						<view class="u-p-30">
							<view class="" v-for="(item,index) in profile.reply_list" :key="index">
								<view class="u-flex">
									<u-avatar :src="item.avatar" bg-color="#E4E4E4" :size="70" :show-level="item.is_power==1"
										:level-bg-color="$appConfig.mainColor"></u-avatar>
									<view class="u-flex-1 u-m-l-12">
										<view class="u-font-22 u-m-b-10">{{item.name}}</view>
										<view class="u-tips-color u-font-20">{{item.add_time}}</view>
									</view>
									<view class="u-tips-color u-font-32" @click="evaluateLikeHandle(item.is_star,item.id)">
										<text class="iconfont u-m-r-10" :class="[item.is_star?'icon-dianzan2':'icon-dianzan']"></text>
									</view>
									<text class="u-light-color u-font-20">{{item.like}}</text>
								</view>
								<view class="commet-content">
									{{item.content}}
								</view>
								<view class="service-item">
									<view class="u-flex-1 w-0">
										<view class="u-line-1 u-light-color">
											{{item.title}}
										</view>
									</view>
								</view>
								<view class="divide-line"></view>
							</view>
							<mescroll-empty :option="{tip:'暂无相关数据'}"
								v-if="profile.reply_list&&profile.reply_list.length==0"></mescroll-empty>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="view-title u-flex u-row-between">
							简介 (资质)
						</view>
						<view class="u-p-30">
							<view class="u-font-28">
								<text>{{profile.content}}</text>
							</view>
							<view class="u-light-color" v-if="!profile.content">(暂无相关描述)</view>
							<view class="black u-font-32 u-m-b-30 u-m-t-40">相关资历展示</view>
							<view class="u-m-b-20 radius10 u-border" v-for="(item,index) in imageList" :key="index">
								<u-image v-if="item" :src="item" mode="aspectFill" width="100%" height="400"
									@click="previewImage(index)" :show-menu-by-longpress="false"></u-image>
							</view>
							<view class="u-light-color" v-if="imageList.length==0">(暂未上传)</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- footer -->

		<view class="bottom-action" v-if="uid!=userInfo.uid && profile.is_power">
			<view class=" u-flex u-row-between u-tips-color u-font-28">
				<view class="u-flex-col u-col-center" @click="followHandle">
					<text class="iconfont " :class="[profile.is_follow==1?'icon-guanzhu2':'icon-guanzhu']"></text>
					关注
				</view>
				<view class="u-flex-col u-col-center u-m-l-20" @click="toChat">
					<u-icon name="chat" size="40"></u-icon>
					咨询
				</view>

				<view class="u-m-l-20 u-m-r-20">
					<u-button shape="circle" plain hover-class="none" type="primary" open-type="share" @click="shareHandle"
						:customStyle="{
						backgroundColor: '#fff !important'
					}">
						帮他转发
					</u-button>
				</view>
				<view class="u-flex-1 w-0">
					<u-button type="primary" hover-class="none" shape="circle" @click="showReceive = true">
						一键下单
					</u-button>
				</view>
			</view>
		</view>

		<view class="nav-btn" v-if="uid==userInfo.uid">
			<u-button type="primary" shape="circle" plain @click="toDemand"
				:customStyle="{backgroundColor:'#ffffff !important'}" v-if="current==1">
				<u-icon name="plus" size="28"></u-icon>
				<text>发布需求</text>
			</u-button>
			<u-button type="primary" shape="circle" plain @click="toServe"
				:customStyle="{backgroundColor:'#ffffff !important'}" v-if="current==0">
				<u-icon name="plus" size="28"></u-icon>
				<text>发布服务</text>
			</u-button>
		</view>

		<!-- 接单弹窗 -->
		<u-popup v-model="showReceive" mode="bottom" border-radius="20">
			<view class="popup-box">
				<view class="u-font-32 font-medium u-m-b-30">
					服务场景
				</view>
				<view class="u-flex-col u-col-top">
					<view class="service-select" :class="{select:selectService==index}" v-for="(item,index) in profile.serve_list"
						:key="index" @click="selectService=index">
						{{item.title}}
					</view>
				</view>
				<view class="u-font-32 font-medium u-m-b-30">
					服务价格
				</view>
				<view class="u-flex">
					<view class="type-view">
						<view class="u-m-b-16">
							<text class="u-font-32 u-m-r-10">线下帮忙</text><text class="u-light-color">1对1服务</text>
						</view>
						<view class="u-type-warning">
							<text
								class="u-font-32 price">{{profile.serve_list&&profile.serve_list[selectService]&&profile.serve_list[selectService].price}}</text>
						</view>
					</view>
				</view>
				<u-button type="primary" hover-class="none" shape="circle" @click="toSubService">确定</u-button>
			</view>
		</u-popup>

		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<u-modal v-model="aggreeModal" @confirm="aggreelHandle" ref="aggreeModal" :async-close="true" title="提示"
			confirm-text="去设置" content="选取相册图片需要您授予应用权访问相册权限" show-cancel-button :confirm-color="$appConfig.mainColor"
			z-index="9999"></u-modal>
	</view>
</template>

<script>
	import {
		navProfile
	} from '@/common/enum.js'
	import permission from '@/uni_modules/json-gps/js_sdk/wa-permission/permission.js'
	export default {
		data() {
			return {
				opacity: 0,
				navProfile: navProfile,
				current: 0,
				swiperCurrent: 0,
				activeItemStyle: {
					color: "#333333"
				},
				stickyTop: 0,
				swiperHeight: 300,
				showReceive: false,
				selectService: 0,
				userInfo: this.$store.state.vuex_userInfo,
				bg_url: '',
				uid: '',
				profile: '',
				imageList: [],
				isShare: '',
				loading: true,
				aggreeModal: false
			}
		},
		onReady() {

			const {
				statusBarHeight,
				screenWidth,
				platform
			} = this.$store.state.vuex_sysmbelInfo
			let navBarHeight = 0
			// #ifdef MP
			navBarHeight = statusBarHeight + (platform == 'ios' ? 44 : 48);
			// #endif

			// #ifdef APP-PLUS
			navBarHeight = statusBarHeight + 44
			// #endif
			this.stickyTop = parseInt((750 * navBarHeight) / screenWidth)
			// console.log(this.$store.state.vuex_sysmbelInfo);
		},
		mounted() {
			setTimeout(() => {
				this.$nextTick(() => {
					this.getCurrentSwiperHeight('.swiper-item');
				})
			}, 200)
		},
		onShow() {
			if (this.refirsh) {
				this.queryProfile();
			}
			this.refirsh = true
		},
		onLoad(e) {
			console.log(e);
			this.uid = e.id || e.spid;
			this.queryProfile();
			this.bg_url = this.$u.api.getAppImage('center-bg.png');
			this.isShare = e.spid
			let current = e.status || 0
			current = Number(current)
			this.change(current)
		},
		onPageScroll(e) {
			this.opacity = e.scrollTop / 100
		},
		methods: {
			aggreelHandle() {
				this.aggreeModal = false
				permission.gotoAppPermissionSetting()
			},
			// 咨询
			toChat() {
				this.$u.route('/pages/subpage/message/chat', {
					uid: this.uid,
					name: this.profile.name
				})
			},
			// 关注
			followHandle() {
				if (this.profile.is_follow == 0) {
					this.$u.api.followHandle(0, this.uid).then(res => {
						this.$u.toast('关注成功')
						this.queryProfile()
					})
				} else {
					uni.showModal({
						content: '确定取消关注？',
						confirmColor: this.$appConfig.mainColor,
						success: (res) => {
							if (res.confirm) {
								this.$u.api.followHandle(1, this.uid).then(resp => {
									this.$u.toast('已取消关注')
									this.queryProfile()
								})
							}
						}
					})
				}

			},
			queryProfile() {
				this.$u.api.public.power_detail(this.uid).then(res => {
					this.profile = res;
					this.imageList = [...(this.profile.certificate_honor || []), ...(this.profile.certificate_image || []),
						...(this.profile.life_image || [])
					];
					this.$nextTick(() => {
						this.getCurrentSwiperHeight('.swiper-item');
					})
					this.loading = false;
					// #ifdef MP
					this.$u.mpShare = {
						title: (res.is_power ? '把关师' : '') + res.name,
						imageUrl: res.bg_img || this.$u.api.getAppImage('mp-share-cover.png'),
						path: `pages/subpage/profile/index?id=${res.uid}&spid=${this.userInfo.uid}&status=3`
					}
					// #endif
				}).catch(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				})
			},
			shareHandle() {
				// #ifdef APP
				this.uniShare({
					path: `pages/subpage/profile/index?id=${this.profile.uid}&spid=${this.userInfo.uid}&status=3`,
					title: (this.profile.is_power ? '把关师' : '') + this.profile.name,
					imageUrl: this.profile.bg_img
				})
				// #endif

			},
			change(index) {
				this.swiperCurrent = index;
				this.getCurrentSwiperHeight('.swiper-item');
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 获取内容高度
			getCurrentSwiperHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					// console.log(res);
					this.swiperHeight = 200 + res[0][this.swiperCurrent].height;
				})
			},
			// 一键把关（去预约）
			toSubService() {
				this.showReceive = false
				if (!this.userInfo.is_real) {
					this.$u.route("/pages/subpage/profile/autonym")
				} else {
					this.$u.route("/pages/subpage/order/action_user", {
						id: this.profile.serve_list[this.selectService].id,
						role: 'user'
					})
				}

			},
			// 更换背景图
			async changeBgImagehandle() {
				// #ifdef APP
				if (await permission.premissionCheck('CAMERA_EXTERNAL_STORAGE')) {
					this.changeBgImage()
				} else {
					this.aggreeModal = true
				}

				// #endif
				// #ifdef MP
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						this.changeBgImage()
					},
					fail: () => {
						uni.showModal({
							title: '提示',
							content: '选取相册图片需要您授小程序权访问相册权限',
							confirmText: '去授权',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (ress) => {
											console.log(ress);
											if (ress.authSetting['scope.writePhotosAlbum']) {
												this.changeBgImagehandle()
											}
										}
									})
								}
							}
						})
					}
				})
				// #endif
			},
			changeBgImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: (res) => {
						uni.showLoading({
							title: '上传中...'
						})
						this.$u.api.uploadImage(res.tempFilePaths[0]).then(res => {
							this.$u.api.uploadBgImage({
								image: res
							}).then(res => {
								this.$u.toast('背景图已更新')
								this.queryProfile()
							}).finally(() => {
								uni.hideLoading()
							})
						}).catch(err => {
							uni.hideLoading()
						})
					}
				})

			},
			// 编辑资料
			toEditprofile() {
				this.$u.route("/pages/subpage/profile/profile")
			},
			toDemand() {
				if (this.userInfo.is_real) {
					this.$u.route('/pages/subpage/publish/demand')
				} else {
					this.$i.route("/pages/subpage/profile/autonym")
				}
			},
			toServe() {
				if (this.userInfo.is_power) {
					this.$u.route('/pages/subpage/publish/service')
				} else {
					this.$u.route("/pages/subpage/profile/attestation")
				}
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.imageList,
					current: index,
					longPressActions: null
				})
			},
			// 评论点赞
			evaluateLikeHandle(type, id) {
				let status = type == 1 ? 0 : 1
				this.$u.api.evaluatePraise(id, {
					status
				}).then(res => {
					this.queryProfile()
					this.$u.toast(type == 1 ? '已取消点赞' : '点赞成功')
				})
			},
			// 返回按钮
			backBtnHandle() {
				if (this.isShare) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.header-cover {
		height: 365rpx;
		position: relative;
		background-size: cover;

		.back-btn {
			position: fixed;
			left: 30rpx;
			top: 60px;
			color: #fff;
			font-size: 32rpx;
		}

		.change-bg-btn {
			position: absolute;
			bottom: 40rpx;
			right: 30rpx;
		}
	}

	.divide {
		margin: 0 16rpx;
	}

	.divide-line {
		border-bottom: 1rpx solid #EEEEEE;
		margin: 20rpx 0;
	}

	.good-content {
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.view-title {
		padding: 20rpx 30rpx 17rpx;
		font-size: 34rpx;
		font-weight: 600;
		color: #000000;
		border-bottom: 1px solid #EEEEEE;
	}

	.service-item {
		display: flex;

		&:before {
			content: '';
			display: block;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #999;
			margin-right: 16rpx;
			margin-top: 16rpx;
		}

		.service-desc {
			line-height: 40rpx;
			margin-bottom: 10rpx;
		}
	}

	.commet-content {
		font-size: 32rpx;
		color: #333333;
		line-height: 58rpx;
	}

	.bottom-action {
		position: fixed;
		width: 100%;
		height: 170rpx;
		background-color: #fff;
		box-shadow: 1rpx 0rpx 1rpx 0rpx rgba(0, 0, 0, 0.25);
		bottom: 0;
		padding: 28rpx 30rpx 0;
	}

	.popup-box {
		padding: 30rpx 30rpx 120rpx;

		.service-select {
			background: #F6F6F6;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			padding: 0 15rpx;

			&.select {
				background: #DEFFE6;
				border: 1rpx solid $u-type-primary;
				position: relative;
				overflow: hidden;

				&:after {
					content: '\eb0e';
					font-family: 'iconfont';
					font-size: 48rpx;
					position: absolute;
					right: 0;
					bottom: -6px;
					color: $u-type-primary;
				}
			}
		}

		.type-view {
			background: #F6F6F6;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 12rpx 15rpx;
			margin-bottom: 30rpx;
		}
	}

	.nav-btn {
		position: fixed;
		left: 0;
		bottom: 50rpx;
		display: flex;
		justify-content: center;
		width: 100%;
	}
</style>